<template>
    <div class="login">
        <div class="header">
            <div class="back" @click="onBack"><van-icon name="arrow-left" /></div>
            <div class="help">帮助</div>
        </div>
        <!--  :rules="[{ required: true, message: '请填写用户名' }]"  -->
        <!-- <h3>登录</h3> -->
        <van-form @submit="onSubmit">
            <van-field v-model="username" name="uname" label="用户名" placeholder="请输入" />

            <van-field v-model="password" type="password" name="upass" label="密码" placeholder="请输入" />

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">登录</van-button>
            </div>

            <div>
                <router-link class="link" to="/register">注册</router-link>
            </div>

            <div class="message">
                <van-checkbox v-model="checked" icon-size="12px"></van-checkbox>
                阅读并同意超值会的
                <a href="#">《服务协议》</a>
                <a href="#">《个人信息保护政策》</a>未注册手机号将自动注册
            </div>
        </van-form>
        <other-view></other-view>

    </div>
</template>

<script>
// 导入组件
import { Toast, Dialog } from 'vant'
import OtherView from '../components/OtherView.vue';
// 初始化（获取存储在本地的所有用户信息）
let sky_users = []
let sky_users_str = localStorage.getItem("SKY_USERS")
if (sky_users_str) {
    // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
    sky_users = JSON.parse(sky_users_str)
}


export default {
    data() {
        return {
            username: '',
            password: '',
            checked: false,
        };
    },
    methods: {
        onSubmit(values) {
            // console.log('submit', values);
            // 判断用户是否阅读平台协议
            if (!this.checked) {
                Toast('请阅读协议和政策');
                return false;
            }

            // 解构赋值
            let { uname, upass } = values
            // 判断输入框是否为空
            if (uname == "" || upass == "") {
                // 弹窗提示
                // Toast.fail('输入框不能为空');
                Toast('输入框不能为空~')
                return false;
            }

            // 匹配账号和密码
            let arr = sky_users.filter(item => {
                return item.username == uname && item.password == upass
            })

            // console.log(arr);
            // 根据arr数组长度判断用户是否登录成功
            if (arr.length == 1) {
                // 把用户ID作为token
                let id = arr[0].id;
                let username = arr[0].username;
                localStorage.setItem("AUTO_TOKEN", id);
                localStorage.setItem("SKY_USERNAME", username);
                // 给用户反馈“注册结果”
                Dialog.alert({
                    message: '登录成功。',
                }).then(() => {
                    // on close
                    // 跳转登录页
                    this.$router.push({ path: '/my' })
                });
            }
            else {
                let arr2 = sky_users.filter(item => item.username == uname)
                if (arr2.length == 0) {
                    Toast('该账号不存在')
                }
                else {
                    Toast('账号或者密码错误')
                }
            }
        },
        onBack() {
            // 返回上一页
            this.$router.go(-1)
        }
    },
    components: {
        'other-view': OtherView
    }


};
</script>

<style lang="less">
.login {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        padding: 0 15px;
        margin-bottom: 50px;

        .back {
            font-size: 20px;
        }

        .help {
            font-size: 16px;

        }
    }

    .van-button--normal {
        background-color: #d0021b;
        border: 0;
    }

    .link {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 16px;
        // text-decoration: underline;

    }

    .message {
        padding: 0 15px;
        box-sizing: border-box;
        margin-top: 20px;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        text-align: left;
        color: #666;
        line-height: 175%;

        a {
            color: #0c8bf3;
        }

        .van-checkbox {
            display: inline-block !important;
        }
    }

}
</style>